import React ,{useState,useEffect}from 'react'
import { Tabs } from 'antd-mobile'
import { MinusOutline } from 'antd-mobile-icons'
import styles from './index.module.css'
import { useNavigate } from 'react-router-dom'
import { useSearchParams } from 'react-router-dom'
function Hot() {
  const [left,setLeft] = useState('上海')
  const [right,setRight] = useState('北京')
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  
  const goCity=(value)=>{
    navigate('/city',{
      state:{
        value
      }
    })
  }
  useEffect(()=>{
    setLeft(searchParams.get('value')=='left'?searchParams.get('city'):localStorage.getItem('cityLeft')||'上海')
    setRight(searchParams.get('value')=='right'?searchParams.get('city'):localStorage.getItem('cityRight')||'北京')
  },[])

  return (
    <div>
      {/* 3、实现国内火车和国际火车的切换功能 */}
         <Tabs>
          <Tabs.Tab title='国内火车' key='fruits'>
            <div className={styles.hot}>
              <span onClick={()=>goCity('left')}>{left}</span>
              <span><MinusOutline /></span>
              <span onClick={()=>goCity('right')}>{right}</span>
            </div>

          </Tabs.Tab>
          <Tabs.Tab title='国际火车' key='vegetables'>
            西红柿
          </Tabs.Tab>
        </Tabs>
    </div>
  )
}

export default Hot
